<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>layui-demo</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="./layui/css/layui.css" media="all">
<link rel="stylesheet" href="./font-awesome-4.7.0/css/font-awesome.css" />
<script src="./js/jquery-2.0.3.js"></script>

</head>
<body class="layui-layout-body">
	<div class="layui-layout layui-layout-admin">
		<div id="editFormDiv" style="display: none">

			<!-- <form class="layui-form" style="width: 90%; padding-top: 20px;"
				action="" lay-filter="example"> -->

			<table class="layui-table" style="left: 50px;">

				<tr>
					<td colspan="2">
						<div class="layui-inline">
							<label class="layui-form-label" style="width: 100px;">流程编号：</label>
							<div class="layui-input-inline">
								<input type="text" name="flowid" id="flowid" autocomplete="off"
									readonly="readonly" class="layui-input" style="width: 500px;">
							</div>
						</div>
					</td>
				</tr>

				<tr>
					<td>
						<div class="layui-inline">
							<label class="layui-form-label" style="width: 100px;">申请人工号：</label>
							<div class="layui-input-inline">
								<input type="text" autocomplete="off" readonly="readonly"
									name="applyno" id="applyno" class="layui-input">
							</div>
						</div>
					</td>
					<td>
						<div class="layui-inline">
							<label class="layui-form-label" style="width: 100px;">申请人部门：</label>
							<div class="layui-input-inline">
								<input type="text" autocomplete="off" readonly="readonly"
									name="applydeptname" id="applydeptname" class="layui-input">
							</div>
						</div>
					</td>
				</tr>

				<tr>
					<td colspan="2">
						<div class="layui-inline">
							<label class="layui--label" style="width: 100px;">申请人邮箱：</label>
							<div class="layui-input-inline">
								<input type="text" autocomplete="off" name="applyemail"
									readonly="readonly" id="applyemail" class="layui-input"
									style="width: 500px;">
							</div>
						</div>
					</td>
				</tr>
			</table>

			<table class="layui-table">

				<tr>
					<td>
						<div class="layui-inline">
							<label class="layui-form-label" style="width: 100px;">物料编码：</label>
							<div class="layui-input-inline">
								<input type="text" autocomplete="off" name="materialno"
									readonly="readonly" id="materialno" class="layui-input">
							</div>


						</div>
					</td>
					<td>
						<div class="layui-inline">
							<label class="layui-form-label" style="width: 100px;">物料名称：</label>
							<div class="layui-input-inline">
								<input type="text" autocomplete="off" readonly="readonly"
									name="materialname" id="materialname" class="layui-input">
							</div>


						</div>
					</td>

				</tr>


				<tr>
					<td>
						<div class="layui-inline">
							<label class="layui-form-label" style="width: 100px;">物料单价：</label>
							<div class="layui-input-inline">
								<input type="text" autocomplete="off" readonly="readonly"
									name="materialprice" id="materialprice" class="layui-input">
							</div>
						</div>
					</td>
					<td>
						<div class="layui-inline">
							<label class="layui-form-label" style="width: 100px;">库存：</label>
							<div class="layui-input-inline">
								<input type="text" autocomplete="off" readonly="readonly"
									name="materialnum" id="materialnum" class="layui-input">
							</div>
						</div>
					</td>
				</tr>
				<tr>
					<td>
						<div class="layui-inline">
							<label class="layui-form-label" style="width: 100px;">申请数量：</label>
							<div class="layui-input-inline">
								<input type="number" autocomplete="off" min="1" id="applynum"
									readonly="readonly" name="applynum" class="layui-input">
							</div>
						</div>
					</td>
					<td>
						<div class="layui-inline">
							<label class="layui-form-label" style="width: 100px;">总金额：</label>
							<div class="layui-input-inline">
								<input type="number" name="totalmoney" id="totalmoney"
									readonly="readonly" autocomplete="off" readonly="readonly"
									class="layui-input">
							</div>
						</div>
					</td>
				</tr>
			</table>



			<table class="layui-table">
				<tr>
					<td colspan="2">
						<div class="layui-form-item layui-form-text">
							<label class="layui-form-label">申请说明</label>
							<div class="layui-input-block">
								<textarea placeholder="请输入内容" class="layui-textarea"
									readonly="readonly" name="applyreason" id="applyreason"
									style="height: 20px;"></textarea>
							</div>
						</div>
					</td>
				</tr>
			</table>
		</div>

		<div class="layui-body">
			<!-- 内容主体区域 -->
			<div style="padding: 15px;">
				<div class="demoTable">
					搜索名字：
					<div class="layui-inline">
						<input class="layui-input" name="id" id="demoReload"
							autocomplete="off">
					</div>
					<button class="layui-btn" data-type="reload">搜索</button>
				</div>
				<table class="layui-hide" id="test" lay-filter="test"></table>
			</div>
		</div>
	</div>

	<script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-xs" lay-event="edit">查看</a>

</script>


	<script src="./layui/layui.js" charset="utf-8"></script>
	<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->

	<script>
		layui.use([ 'table', 'form' ], function() {
			var table = layui.table;
			var form = layui.form;

			table.render({
				elem : '#test',//显示位置
				url : 'myapplyed',//地址和springmvc中控制器地址一致
				where : {
					//传值 startDate : startDate,
					applyno : "${empno}"
				},
				toolbar : '#toolbarDemo',
				title : '02环节处理数据表',
				cols : [ [ {
					type : 'checkbox',
					fixed : 'left'
				}, {
					field : 'id',
					title : 'ID',
					width : 80,
					fixed : 'left',
					unresize : true,
					sort : true
				}, {
					field : 'flowid',
					title : '流程编号',
					width : 250
				}, {
					field : 'materialno',
					title : '物料编码',
					width : 130
				}, {
					field : 'materialname',
					title : '物料名称',
					width : 130
				}, {
					field : 'applydate',
					title : '申请时间',
					width : 130
				}, {
					field : 'applynum',
					title : '申请数量',
					width : 130
				}, 
				{
					fixed : 'right',
					title : '操作',
					toolbar : '#barDemo',
					width : 250
				} ] ],
				page : true,
				id : 'testReload'
			});

			//监听行工具事件
			table.on('tool(test)', function(obj) {
				var data = obj.data;
				//console.log(obj)
				if (obj.event === 'edit') {

					//等级

					layer.open({
						type : 1//弹出层 div
						,
						area : [ '600px', '400px' ],
						shade : 0.6,
						id : 'LAY_layuipro' //设定一个id，防止重复弹出
						,
						//content : $("#editFormDiv").html(),
						content : $("#editFormDiv"), //后面不用.html()

					});

					//将流程编号传到控制器获取申请的数据
					$.ajax({
						url : "selectbyflowid",
						type : "GET",
						data : {
							flowid : data.flowid
						},

						dataType : "json",
						success : function(apply01) {
							//赋值给对应的文本框
							$("#flowid").val(apply01.flowid);
							$("#applyno").val(apply01.applyno);
							$("#materialname").val(apply01.materialname);
							$("#materialnum").val(apply01.materialnum);
							$("#applyreason").val(apply01.applyreason);
							$("#applydeptname").val(apply01.applydeptname);
							$("#applyemail").val(apply01.applyemail);
							$("#materialno").val(apply01.materialno);
							$("#materialprice").val(apply01.materialprice);
							$("#applynum").val(apply01.applynum);
							$("#totalmoney").val(apply01.totalmoney);
							$("#flowidhidden").val(apply01.flowid);
							$("#applynohidden").val(apply01.applyno);
							$("#02handlder").val(apply01.nexthandler);

						}
					});
				}
			});

			/*表格数据重载 模糊检索*/
			var $ = layui.$, active = {
				reload : function() {
					var demoReload = $('#demoReload');

					//执行重载
					table.reload('testReload', {
						page : {
							curr : 1
						//重新从第 1 页开始
						},
						where : { //检索的条件
							//传递的参数 key为参数名 {} 内传递的是参数的值
							/* key: {
							  
							  id: demoReload.val(),
							  username :....
							} */
							//只有一个key : value格式
							keywords : demoReload.val()
						}
					});
				}
			};

			$('.demoTable .layui-btn').on('click', function() {
				var type = $(this).data('type');
				active[type] ? active[type].call(this) : '';
			});

			/*修改 表单的提交 按钮的单击事件 ，监听1 */
			$(document).on("click", ".btn-update", function() {
				//可以实现 比较麻烦....
				console.log(layui.form.data);
			});
		});
	</script>


	<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

</body>
</html>
